<!--  -->
<template>
  <div class='login-container'>
    <el-row>
      <el-col :span="12" :xs="0">左侧</el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login-form">
          <h1>Hello!</h1>
          <h2>欢迎来到硅谷甄选!</h2>
          <div class="item-list">
            <el-form-item label="">
              <el-input placeholder="请输入用户名" v-model="loginRequest.username" :prefix-icon="User"></el-input>
            </el-form-item>

            <el-form-item label="">
              <el-input type="password" v-model="loginRequest.password" placeholder="请输入密码" :prefix-icon="Lock" :show-password="true">
              </el-input>
            </el-form-item>

            <el-form-item label="">
              <el-button class="login-btn" size="default" type="primary" @click="doLogin">登陆</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">

  import { User, Lock } from '@element-plus/icons-vue'

  import { reactive } from 'vue';
  
  import useUserStore from '@/store/modules/user';

  let loginRequest=reactive({username:"",password:""})



  async function doLogin(){

    
    const store=useUserStore()
    try {
      await store.userLogin(loginRequest)
    }catch (e) {
      console.log("e:{}")
    }

   
  }
</script>
<style scoped>
.login-container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;

}

.login-form {
  position: relative;
  top: 30vh;
  width: 80%;
  background: url("@/assets/images/login_form.png") no-repeat;
  background-size: cover;
  padding: 40px;

}

.login-form h1 {
  color: white;
  font-size: 40px;
}

.login-form h2 {
  color: white;
  font-size: 20px;
  margin: 20px 0;
}

.login-form .login-btn {
  width: 100%;
}

.login-form .item-list {
  padding: 100px;
  padding-top: 40px;
  padding-bottom: 0;
}
</style>


